iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0

今天我們來練習製作一個可互動的 Spotify Sign-in 低精度原型吧!

首先,用昨天教學的 Whimsical,做好會用到每一張 Wireframe 並輸出。
https://ithelp.ithome.com.tw/upload/images/20210923/20105528GUMwaRKnuV.png

動態互動的部份,使用 Invision 工具 來製作,到 Invision 網站註冊一個帳號並登入。
https://ithelp.ithome.com.tw/upload/images/20210923/20105528SQX8Tao7Va.png

https://ithelp.ithome.com.tw/upload/images/20210923/20105528PxV4EINMZZ.png
(1) 右下方的問號按鈕可查看教學
(2) 點擊右上方的 +,新增一個專案

選擇 Prototype, 媒介選擇 Android Phone
https://ithelp.ithome.com.tw/upload/images/20210923/20105528lLZT8CAYST.png
https://ithelp.ithome.com.tw/upload/images/20210923/2010552857oI4xf2Zv.png

Invision 的原型製作邏輯

I. 匯入要用到的平面圖檔 → II.設定點擊範圍 (熱點) → III. 指定目的頁面及設定 Transition

讓我們一步步說明於下。

I. 匯入要用到的平面圖檔

直接將用 Whimsical 或任何軟體製作好的 wireframe 全部拖拽進此 Invision 專案中 (就算是手繪草稿的拍照也行)
https://ithelp.ithome.com.tw/upload/images/20210923/20105528FCxG2bEuRT.png
https://ithelp.ithome.com.tw/upload/images/20210923/20105528Al64FLPdck.png
註: 此處可任意拉動排序,方便後續指定目的地時辨別

II. 設定點擊範圍 (熱點) & III. 指定目的頁面及設定過場漸變

點選要當首頁起始的頁面 (例如 Spotify Example - A-01),進入熱點設定介面。
https://ithelp.ithome.com.tw/upload/images/20210923/201055285wMFvZVjYy.png

點擊下方第二個 icon (build mode, 快速鍵 B ) → 拉框決定熱點範圍 → 指定目的地頁面
https://i.postimg.cc/j5zHtrR4/D8-1-hotspot-A.gif

此處可以設定 (1) 目的地頁面、 (2) 動作觸發、 (3) 轉場方式
https://s3.us-west-2.amazonaws.com/secure.notion-static.com/6e6ded58-e0f5-43ab-ad58-3122a29a2dea/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20211201%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20211201T151943Z&X-Amz-Expires=86400&X-Amz-Signature=331b68757f48a1707ea70184782160138a2023a778c7fd9a9af2dbab8a4e2195&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22&x-id=GetObject
(1) 目的地頁面可用當初匯入的檔名指定,或點選 [ Browse ] 以縮圖選擇 (後者較方便直覺)
(2) 常見的動作已有許多內建,例如: 點擊、雙擊、向上/下/左/右滑動
(3) 轉場方式也都可指定為常見的一些過場流動方式,例如:Dissolve, Push R/L , Slide R/L/T/D, Flip R/L。當然,也有 自內向外的 pop-up 過場。將滑鼠懸於其上也看的到動畫提示,相當容易讓人預先理解套用的過場將會長什麼樣子。

點擊下方第一個 icon (Preview Mode,快速鍵 P ),可執行剛剛做好的原型查看。
https://i.postimg.cc/Y9c65SBS/D8-2-privew-Mode.gif

製作返回

有二種方式可以製作,一種作法是如同上述方式,直接指定目的地,這在製作小型原的時候沒問題,但若原型稍大些,可能會遇到 A 與 B 二個頁面都會到 C,那麼 C 的返回鍵該要指定 A 還是 B 呢?是不是有點窘?所以這種方式並不適合。

第二種方式是將目的地指定為連結到上一頁 (Link Back),也就是 invision會記住是怎麼到來到這一頁的,透過設定的方式就能依據原型當下的操作狀態,聰明地自己回到對的頁面。 (麵包屑的概念)
https://i.postimg.cc/GmHv9Dc2/D8-3-Back.gif

以此類推,繼續把其他相關頁面也都串接設定完成。

https://i.postimg.cc/mg5NSwdC/D8-4-final.gif

太好了!現在我們已掌握了 Invision 的基本使用方式,搭配前一篇的 Whimsical 繪製 Wireframe教學一起服用,用數位工具製作低精度原型的技能你已經Get了!


上一篇
Day7. 使用 Whimsical 繪製低精度 Wireframe
下一篇
Day9. 以放聲思考法快速進行概念驗証
系列文
網頁 UX / UI 攻心術|30天練成 Figma、Axure RP 以及 UX 心法30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言